Skip to main content

Themes & Styling

Themes control the visual identity of a course, including layout, fonts, colors, and navigation elements. This guide covers using the Theme Picker, creating presets, and building custom themes.

Overview​

Each course in MAXRES Construct can be styled using a theme. Themes help maintain consistency across training materials and allow organizations to reflect brand guidelines or user preferences.

Requirements​

  • Course Creator or Admin access to course configuration settings
  • Developer access (for custom theme creation)
  • Familiarity with Node.js, LESS, and Handlebars (for advanced theme development)

Theme Picker​

The Theme Picker allows you to assign a visual theme to a course:

  1. Open the Course Editor.
  2. Go to Theme Picker settings.
  3. Select a theme or preset from the dropdown list.
  4. Click Save.

The selected theme will immediately apply when the course is previewed or published.

Creating Theme Presets​

Theme presets let you save custom configurations (e.g., colors, fonts) for reuse across courses.

  1. Open any course’s Theme Picker.
  2. Adjust the available theme options to suit your needs.
  3. Click Save as preset.
  4. Provide a descriptive name.
  5. Click Save.

Your preset will now appear in the dropdown for future course use.

Creating Custom Themes​

To create a custom theme, you’ll need to modify an existing theme’s source code.

Step 1: Obtain Source Files​

Start with a theme like construct-theme-vanilla.zip.

Step 2: Set Up Development Environment​

note

Theme SDKs are provided on a case by case basis. Please contact your account manager for more information.

Step 3: Modify Files​

Edit the source files to customize your theme.

Editing Theme Files​

Two main types of files are used for styling and structure:

.less Files​

  • Control visual design (colors, layout, spacing)
  • Written using the LESS CSS preprocessor
  • Located in the src or less directories

.hbs Files (Handlebars Templates)​

  • Define structural layout and reusable components
  • Located in templates or partials directories
  • Use Handlebars syntax

Renaming the Theme​

To rename a theme:

  1. Open the theme folder in your code editor.
  2. Use "Find in Folder" to search for the original theme name (e.g., vanilla).
  3. Use "Replace All" to substitute with your custom name.
note

This step is essential for distinguishing your custom theme in the Construct interface.

Testing Themes​

Before uploading your theme to MAXRES Construct, test it locally:

  1. Install Dependencies: Run npm install from the theme folder.
  2. Build Theme: Run grunt build to compile the course and styles.
  3. Preview Locally: Run grunt server to launch a local preview.
  4. Review Changes: Use browser dev tools to inspect and debug layout or styling issues.

Uploading Themes​

Once tested:

  1. Zip the Theme Folder: Include all files, with bower.json, package.json, and core assets in the root.
  2. Connect to the instance server using WinSCP or VSCode Remote Explorer
  3. In the application root directory select Plugins and then Packages
  4. Upload your theme package to the Packages folder
  5. Login to your Construct instance
  6. Select the hamburger menu
  7. Select Plugin Management
  8. Select Install Plugins
  9. If the plugin was successfully uploaded it will be visible in the packages panel
  10. Select Install Packages
  11. You will see a message informing you of the packages that were installed successfully and any packages that were unable to be installed with an appropriate error message.
warning

Uploading themes that are improperly configured may cause display issues or platform instability. Always test thoroughly before uploading to live environments.

After a successful upload, your custom theme will be selectable via the Theme Picker.

By using presets or building custom themes, you can tailor courses to specific audiences, organizations, or instructional goals while maintaining consistency and brand fidelity.